<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
	<link href="/skin/css/ustyle.css?v=2.14" rel="stylesheet" type="text/css" />
	<script src="/skin/js/jquery.js"></script>
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<title>{$sys[webname]}</title>
	<style>
		/* 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值 */
		/* chips 风格（顶部两个分类条已复用，只调整观感） */
		.nav-container {
			background: #fff;
			padding: 0.1rem 0.12rem;
			border-top: 0;
			border-bottom: 0.01rem solid #f0f2f5;
		}

		body{
			padding:0 !important;
			margin:0;
		}

		#header .head-b1 {
			height:.4rem;
			line-height:.4rem;
			padding:0;font-size: .16rem;
		}

		.nav-menu {
			display: inline-flex;
			gap: 0.08rem;
		}

		.nav-link {
			display: inline-block;
			padding: .12rem .28rem;
			font-size: .24rem;
			color: #131C35;
			background: #f5f6f7;
			border-radius: 999px;
		}

		.nav-link.active {
			background: #111827;
			color: #fff;
		}

		/* 商品卡片网格 */
		.product-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0.05rem;
			padding: 0.05rem;
			padding-top:0;
		}

		.card {
			position: relative;
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 0.02rem;
			overflow: hidden;
		}

		.card-img img {
			width: 100%;
			height: 1.7rem;
			object-fit: cover;
			display: block;
		}

		.card-body {
			padding: 0.1rem 0.12rem 0.4rem;
		}

		.card-title {
			font-size: 0.12rem;
			line-height: 1.35;
			color: #131C35;
			max-height: 0.38rem;
			overflow: hidden;
			font-weight: 500;
		}

		.card-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 0.06rem;
			margin-top: 0.08rem;
		}

		.tag {
			font-size: 0.08rem;
			color: #31374C;
			padding: 0.02rem 0.05rem;
			border-radius: 0.02rem;
			border: 0.01rem solid #31374C;
		}

		/* 右下角圆形 + 按钮 */
		.card-add {
			position: absolute;
			right: 0.1rem;
			bottom: 0.1rem;
			width: 0.25rem;
			height: 0.25rem;
			border: none;
			background:white;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			border-radius: 999px;
			box-shadow: 0 0.05rem 0.12rem rgba(99, 102, 241, 0.1);
			transition: all 0.2s ease;
		}
		.card-add img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			display: block;
		}
		.card-add.save-anim img{
			animation: cardAddPulse 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
		}

		.card-add:active {
			transform: scale(0.96);
		}
		.card-add.saved{
			width: auto;
			color: #2B4339;
			font-size: 0.12rem;
			font-weight: 400;
			box-shadow: none;
			opacity: 0;
			transform: translateY(0.06rem);
			animation: cardSavedReveal 0.22s ease-out forwards;
		}

		@keyframes cardAddPulse{
			0%{
				transform: scale(1);
				opacity: 1;
			}
			60%{
				transform: scale(1.25);
				opacity: 1;
			}
			100%{
				transform: scale(0.6);
				opacity: 0;
			}
		}

		@keyframes cardSavedReveal{
			0%{
				opacity: 0;
				transform: translateY(0.06rem);
			}
			100%{
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* 空状态 */
		.none {
			color: #9ca3af;
		}

		.popup-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			z-index: 1000;
			background: rgba(0, 0, 0, 0.5);
			animation: fadeIn 0.3s ease;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		.category-popup {
			width: 90%;
			height: 84%;
			max-width: 4.2rem;
			margin-top: 0.2rem;
			background: #fff;
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			overflow: hidden;
			transform: translateY(0);
			animation: slideUp 0.3s ease;
			border-radius: 0.18rem;
		}

		@keyframes slideUp {
			from {
				transform: translateY(0.2rem);
			}

			to {
				transform: translateY(0);
			}
		}

		.popup-header {
			padding: 0.16rem;
			border-bottom: 0.01rem solid var(--border-color);
			position: relative;
		}

		.popup-title {
			font-size: 0.18rem;
			font-weight: 500;
			color: var(--text-color);
			text-align: center;
		}

		.close-btn {
			position: absolute;
			right: 0.16rem;
			top: 0.16rem;
			background: none;
			border: none;
			font-size: 0.3rem;
			color: #999;
			cursor: pointer;
			width: 0.3rem;
			height: 0.3rem;
			background: #aaa;
			color: #fff;
		}

		.search-box {
			padding: 0.12rem 0.16rem;
			border-bottom: 0.01rem solid var(--border-color);
		}

		.search-input {
			width: 100%;
			padding: 0.1rem 0.15rem;
			border: 0.01rem solid var(--border-color);
			border-radius: 0.2rem;
			font-size: 0.14rem;
			outline: none;
			transition: border-color 0.3s;
			background: #ddd;
		}

		.search-input:focus {
			border-color: var(--primary-color);
		}

		.category-levels {
			display: flex;
			height: 60vh;
			overflow: hidden;
			padding: 0 0.1rem;
		}

		.category-column {
			flex: 1;
			overflow-y: auto;
			border-right: 0.01rem solid var(--border-color);
			padding-right: 0.1rem;
		}

		.category-column:last-child {
			border-right: none;
		}

		.category-item {
			padding: 0.08rem 0.1rem;
			font-size: 0.13rem;
			cursor: pointer;
			transition: background 0.2s;
		}

		.category-item:hover {
			background: #f8f8f8;
		}

		.category-item.active {
			color: var(--primary-color);
			background: rgba(0, 0, 0, 0.3);
			color: #fff;
			border-radius: 0.1rem;
		}

		.popup-footer {
			padding: 0.16rem;
			display: flex;
			justify-content: flex-end;
			border-top: 0.01rem solid var(--border-color);
		}

		.submit-btn {
			padding: 0.08rem 0.2rem;
			color: #fff;
			border: none;
			border-radius: 0.2rem;
			font-size: 0.14rem;
			cursor: pointer;
			transition: background 0.3s;
			background: #4a6cf7;
		}

		.submit-btn:hover {
			background: var(--hover-color);
		}

		/* 导航容器（最终版，chips 风格） */
		.nav-container {
			width: 100%;
			background: #fff;
			padding: .10rem .15rem;
			overflow-x: auto;
			/* 允许横向滚动 */
			white-space: nowrap;
			/* 禁止换行 */
			border-bottom: 0.01rem solid #f0f2f5;
			-webkit-overflow-scrolling: touch;
			/* 启用弹性滚动 */
			scrollbar-width: none;
			/* Firefox */
			-ms-overflow-style: none;
			/* IE/Edge */
		}

		.nav-container::-webkit-scrollbar {
			display: none;
		}

		/* 导航菜单与项 */
		.nav-menu {
			display: inline-flex;
			list-style: none;
			gap: .1rem;
		}

		.nav-item {
			display: inline-block;
		}

		/* 链接（胶囊） */
		.nav-link {
			display: inline-block;
			text-decoration: none;
			color: #3c3c3c;
			font-size: .12rem;
			padding: .05rem .12rem;
			border-radius: 999px;
			background: #f5f6f7;
		}

		.nav-link:hover {
			background: #e5e7eb;
			color: #111827;
		}

		.nav-link.active {
			background: #111827;
			color: #fff;
		}

		/* 顶部大类：文字 + 下划线指示器 */
		.nav-container.top-tabs {
			background: #fff;
			padding: .15rem .15rem 0;
			border-bottom: 0.01rem solid #f3f4f6;
		}

		.nav-container.top-tabs .nav-menu {
			gap: .32rem;
		}

		.nav-container.top-tabs .nav-link {
			background: transparent;
			padding: 0 0;
			border-radius: 0;
			font-size: .14rem;
			font-weight: 400;
			color: #131C35;
			opacity: 0.8;
		}

		.nav-container.top-tabs .nav-link:hover {
			background: transparent;
			color: #111827;
		}

		.nav-container.top-tabs .nav-link::after {
			content: "";
			display: block;
			width: 0;
			height: 0.03rem;
			background: #111827;
			border-radius: 0.02rem;
			transition: width .2s ease;
			margin: 0 auto;
			margin-top: 0.06rem;
		}

		.nav-container.top-tabs .nav-link.active {
			color: #111827;
			font-weight: 700;
			font-size: .14rem;
		}

		.nav-container.top-tabs .nav-link.active::after {
			width: 0.18rem;
			/* 下划线长度，可按需调整 */
		}

		/* 计算偏移的 CSS 变量：--top-offset 头部高度，--second-offset 头部+第一排tabs高度 */
		.nav-container.top-tabs {
			position: sticky;
			/* top: var(--top-offset, 0.56rem); */
			z-index: 50;
			background: #fff;
		}

		.nav-container.sticky-sub {
			position: sticky;
			/* top: var(--second-offset, 0.98rem); */
			z-index: 49;
			background: #fff;
			padding-top: .1rem;
		}

		/* 防止 sticky 叠出层，确保有分隔线可见 */
		.nav-container.top-tabs,
		.nav-container.sticky-sub {
			border-bottom: 0.01rem solid #f3f4f6;
		}
		.fenlei-shop{
			height: calc(100vh - 1.67rem);
		}
	</style>
</head>
<script>
	// 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
	(function(){
		var docEl = document.documentElement;
		var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
		function recalc() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
		}
		if (!document.addEventListener) return;
		window.addEventListener(resizeEvt, recalc, false);
		document.addEventListener('DOMContentLoaded', recalc, false);
		recalc();
	})();
</script>
<body class="body">
	<!-- <header id="header" style="position:auto;">
		<section class="head-b head-b1">
			<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img
						src="/skin/img/back.png" /></a></span>
			<h1 id="t0">产品中心</h1>
			<div class="u-right" href="#" style="display:inline-block;">
				<a href="/" class="hSearch right"><img src="/skin/img/i_home.png" /></a>
			</div>
		</section>
	</header> -->

	<div class="nav-container top-tabs">
		<ul class="nav-menu">
			<li class="nav-item"><a href="catgory.php?tag1=0&cid={$cid}&tag2={$tag2}" {if($tag1==0)}
					class='nav-link active' {else} class="nav-link" {/if}>全部</a></li>
			{loop $taglist1 $key as $list}
			<li class="nav-item"><a href="catgory.php?tag1={$list[Id]}&cid={$cid}&tag2={$tag2}" {if($tag1==$list['Id'])}
					class='nav-link active' {else} class="nav-link" {/if}>{$list[name]}</a></li>
			{/loop}
		</ul>
	</div>
	<div class="nav-container sticky-sub">
		<ul class="nav-menu">
			<li class="nav-item"><a href="catgory.php?tag2=0&cid={$cid}&tag1={$tag1}" {if($tag2==0)}
					class='nav-link active' {else} class="nav-link" {/if}>全部</a></li>
			{loop $taglist2 $key as $list}
			<li class="nav-item"><a href="catgory.php?tag2={$list[Id]}&cid={$cid}&tag1={$tag1}" {if($tag2==$list['Id'])}
					class='nav-link active' {else} class="nav-link" {/if}>{$list[name]}</a></li>
			{/loop}
		</ul>
	</div>
	<div id="fenlei" style="padding-top:0.05rem;">

		<div class="fenlei-shop">
			{if($glist)}
			<div class="product-grid">
				{loop $glist $key as $list}
				<a class="card" href="goods.php?id={$list[Id]}">
					<div class="card-img">
						<img src="{$list[gthumb]}" alt="{$list[gname]}">
					</div>
					<div class="card-body">
						<div class="card-title">{$list[gname]}</div>
						<!-- <div class="card-price" style="margin-top:0.06rem;color:#ef4444;font-weight:600;">¥{$list[cash]}</div> -->
						<div class="card-tags">
							{if($list['gname'])}<span class="tag">{$list[gname]}</span>{/if}
						</div>
					</div>
					<button type="button" class="card-add"><img src="/skin/img/icon_add.png" alt="" /></button>
				</a>
				{/loop}
			</div>
			{if($num>$psize)}
			<div style="padding: 0.12rem;">{$page}</div>
			{/if}
			{else}
			<p class="none" style="text-align:center; padding-top:15vh;">产品持续更新中 敬请期待</p>
			{/if}
		</div>
	</div>
	<div class="zc" style="display:none;"></div>
	<div class="popup-container" style="display:none;">
		<div class="category-popup">

			<div class="popup-header">
				<h3 class="popup-title">产品搜索</h3>
				<button class="close-btn">×</button>
			</div>
			<form action="catgory.php?" method="get">
				<div class="search-box">
					<input type="text" name="gname" class="search-input" placeholder="请输入产品名称">
				</div>
				<input type="hidden" name="cid" class="level1" />
				<input type="hidden" name="tag1" class="level2" />
				<input type="hidden" name="tag2" class="level3" />
				<div class="category-levels">
					<div class="category-column" id="level1">

						{loop $cat2 $key as $list}
						<div class="category-item" data-id="{$list[Id]}">{$list[name]}</div>
						{/loop}
						<!--{loop $cat3 $key as $list}-->
						<!--<div class="category-item" data-id="{$list[Id]}">{$list[name]}</div>-->
						<!--{/loop}	-->
					</div>

					<div class="category-column" id="level2">
						{loop $taglist1 $key as $list}
						<div class="category-item" data-id="{$list[Id]}">{$list[name]}</div>
						{/loop}
					</div>
					<div class="category-column" id="level3">
						{loop $taglist2 $key as $list}
						<div class="category-item" data-id="{$list[Id]}">{$list[name]}</div>
						{/loop}
					</div>
				</div>

				<div class="popup-footer">
					<button class="submit-btn">查看商品</button>
				</div>
			</form>
		</div>
	</div>

	<script>
		$("#key").click(function () {
			$(".zc,.popup-container").show();
		});
		document.addEventListener('DOMContentLoaded', function () {

			// 分类选择交互
			const categoryItems = document.querySelectorAll('.category-item');
			categoryItems.forEach(item => {
				item.addEventListener('click', function () {
					// 移除同列中所有active类
					const parentColumn = this.parentElement;
					parentColumn.querySelectorAll('.category-item').forEach(i => {
						i.classList.remove('active');
					});

					// 给当前项添加active类
					this.classList.add('active');
					let id = this.getAttribute('data-id');
					// // 如果是前两列，清空后续列的内容并加载新数据
					if (parentColumn.id === 'level1') {
						$(".level1").val(id);
						// 这里可以添加加载二级分类的逻辑
					} else if (parentColumn.id === 'level2') {
						$(".level2").val(id);
						// 这里可以添加加载三级分类的逻辑
					} else if (parentColumn.id === 'level3') {
						$(".level3").val(id);
						// 这里可以添加加载三级分类的逻辑
					}
				});
			});

			const addButtons = document.querySelectorAll('.card-add');
			addButtons.forEach(btn => {
				btn.addEventListener('click', function (event) {
					event.preventDefault();
					event.stopPropagation();
					if (this.classList.contains('saved')) {
						return;
					}
					const icon = this.querySelector('img');
					if (icon) {
						this.classList.add('save-anim');
						icon.addEventListener('animationend', () => {
							this.classList.remove('save-anim');
							this.classList.add('saved');
							this.textContent = '已收藏';
						}, { once: true });
					} else {
						this.classList.add('saved');
						this.textContent = '已收藏';
					}
				});
			});

			// 关闭弹窗
			document.querySelector('.close-btn').addEventListener('click', function () {
				document.querySelector('.popup-container').style.display = 'none';
				$(".zc").hide();
			});
		});
		function order(id) {
			num = 1;
			$.ajax({
				type: "post",
				dataType: "json",
				url: "/Moudelu.php?m=g&a=cart",
				data: "id=" + id + "&num=" + num,
				success: function (d) {
					if (d[0] == 2) {
						window.location.href = 'login.php'; return false;
					}
					if (d[0] == 0) {
						alert(d[1]);
					}
					else {
						window.location.href = 'cart.php';
					}
				}
			});
		}
		function cart(id) {
			num = 1;
			$.ajax({
				type: "post",
				dataType: "json",
				url: "/Moudelu.php?m=g&a=cart",
				data: "id=" + id + "&num=" + num,
				success: function (d) {
					if (d[0] == 2) {
						window.location.href = 'login.php'; return false;
					}
					else if (d[0] == 0) {
						alert(d[1]);
					}
					else if (d[0] == 3) {
						add = $(".floatcart p i").html();
						add = Number(add) + 1;
						$(".floatcart p i").html(add);
					}
					else {
						//alert(d[1]);
					}
				}
			});
		}
	</script>

	{include(foot)}
	<script>
		$(".jifen").each(function () {
			let a = parseInt($(this).text());
			$(this).text(a);
		})
	</script>
</body>

</html>